<!--上方导航栏 -->
<template>
  <div>
    <div  style="display:block;position:fixed;width:100%;z-index:999" v-if="maintab">
      <yd-tab :callback='load2'>
        <yd-tab-panel label="食" ></yd-tab-panel>
        <yd-tab-panel label="住" ></yd-tab-panel>
        <yd-tab-panel label="行" active ></yd-tab-panel>
        <yd-tab-panel label="游" ></yd-tab-panel>
        <yd-tab-panel label="购" ></yd-tab-panel>
      </yd-tab>
    </div>
    <div v-bind:style="styleObject">
    <yd-slider >
      <yd-slider-item>
         <img src="https://jysh.oss-cn-qingdao.aliyuncs.com/timg.jpeg">
      </yd-slider-item>
    </yd-slider>
    <div >
      <div class="tj-div">
        <span style="width:25%;float:left"><a href="#ditangongjiao">低碳公交</a></span>     
        <span style="width:25%;float:left"><a href="#bianjiechuzu">便捷出租</a></span>
        <span style="width:25%;float:left"><a href="#ziyouzuche">自由租车</a></span>
        <span style="width:25%;float:left"><a href="#gongxiangdanche">共享单车</a></span>
      </div>
      <div class="line-div"></div>
    </div>
    <!-- 低碳公交 -->
    <div>
      <div class="xbt-div" id="ditangongjiao">
        <span>低碳公交</span>
      </div>
      <div style="margin-left:20px;margin-right:20px">&nbsp;&nbsp;&nbsp;&nbsp;{{outdata.traffic_bus_info}}</div>
      <!-- <div style="float:right;margin-right:10px">
        <router-link :to="{path:''}"><span>具体公交查询 >></span></router-link>
      </div> -->
    </div>
    <div class="line-div"></div>
    <!-- 便捷出租 -->
    <div >
      <div class="xbt-div" id="bianjiechuzu">
        <span>便捷出租</span>
      </div>
      <div style="margin-left:20px;margin-right:20px">&nbsp;&nbsp;&nbsp;&nbsp;{{outdata.traffic_taxi_info}}</div>
    </div>
    <div class="line-div"></div>
    <!-- 自由租车 -->
      <div >
        <div class="xbt-div" id="ziyouzuche">
          <span>自由租车</span>
        </div>        
        <div style="margin-left:20px;margin-right:20px">&nbsp;&nbsp;&nbsp;&nbsp;{{outdata.traffic_car_rental_info}}
        </div>
        <!-- 自由租车小图 -->
        <div style="width:100%;">
            <div style="padding-left:20px;width:50%;float:left">
              <img :src="firstList.img" class="tj-img">
            </div>   
            <div>
              <div class="xbtdiv">
                <span>{{firstList.name}}</span>
                <span style="float:right;margin-right:20px;font-size:14px">路线</span>
              </div>
              <div class="adddiv">
                <yd-rate slot="left" v-model="firstList.star" size="18px" readonly></yd-rate>
              </div>
              <div class="adddiv">
                <span>{{firstList.address}}</span>
              </div>
              <div class="adddiv">
                <span>距您位置 1.7KM</span>
                <span style="padding-left:20px">500￥起</span>
              </div>
            </div>  
        </div>
      </div>
      <div style="text-align:center;padding-top:20px">
        <router-link :to="{path:'rentList'}">
          <yd-button type="warning" >
            更多租赁公司>>
          </yd-button>
        </router-link>
      </div>   
    <div class="line-div"></div>
    <!-- 共享单车 -->
    <div >
        <div class="xbt-div" id="gongxiangdanche">
          <span>共享单车</span>
        </div>
        <div style="margin-left:20px;margin-right:20px">&nbsp;&nbsp;&nbsp;&nbsp;{{outdata.traffic_bicycle_sharing_info}}</div>
        <div class="amap-page-container">
          <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo">
            <el-amap-marker v-for="marker in markers" :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable" :key="center.index"></el-amap-marker>
          </el-amap>
        </div>      
    </div>
    <!-- 地图定位 -->
    <!-- <div class="amap-page-container">
      <el-amap vid="amapDemo" :plugin="plugin" :zoom="zoom" :center="center" class="amap-demo">
      </el-amap>
    </div>
    <div class="toolbar">
      <span v-if="loaded">
        location: lng = {{ lng }} lat = {{ lat }}
      </span>
      <span v-else>正在定位</span>
    </div> -->
    <!-- 地图定位 -->
    </div>
  </div>
</template>
<script type="text/babel">
    export default {
      data() {
        let self = this;
        return {
          maintab: true,
          rate1: 3,
          outdata: {},
          zoom: 14,
          readonly: true,
          center: [121.5273285, 31.21515044],
          markers: [
            {
              position: [121.5273285, 31.21515044],
              events: {
                click: () => {
                  alert('click marker');
                },
                dragend: (e) => {
                  this.markers[0].position = [e.lnglat.lng, e.lnglat.lat];
                }
              },
              visible: true,
              draggable: false
            }
          ],
          firstList: {},
          lng: 0,
          lat: 0,
          loaded: false,
          plugin: [{
            pName: 'Geolocation',
            events: {
              init(o) {
                // o 是高德地图定位插件实例
                o.getCurrentPosition((status, result) => {
                  if (result && result.position) {
                    self.lng = result.position.lng;
                    self.lat = result.position.lat;
                    self.center = [self.lng, self.lat];
                    self.loaded = true;
                  }
                });
              }
            }
          }]
        }
      },
      watch: {
        lng() {
          this.load();
        }
      },
      mounted: function() {
        this.load();
        var ua = window.navigator.userAgent.toLowerCase()
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
          this.iswx = true;
          this.maintab = false;
          this.styleObject = {
            'width': '100%',
            'position': 'absolute',
            'top': '0',
            'left': '0'
          };
          // alert('正在使用微信浏览器打开')
        } else {
          this.iswx = false;
          this.maintab = true;
          this.styleObject = {
            'width': '100%',
            'position': 'absolute',
            'top': '2rem',
            'left': '0',
            'margin-bottom': '1rem'
          };
          // alert('正在使用其他浏览器打开' + ua + ' --- ' + ua.match(/MicroMessenger/i))
        }
      },
      methods: {
        load() {
          this.hdAjax({
            url: this.API.trafficInfo,
            data: {
              id: '0000'
            },
            success: (resultData) => {
              this.outdata = resultData.data;
              console.log(this.outdata);
            }
          });
          this.hdAjax({
            url: this.API.trafficList,
            data: {
              longitudes: this.lng,
              latitudes: this.lat
            },
            success: (resultData) => {
              console.log('第一条');
              this.firstList = resultData.data.results[0];
            }
          });
        },
        load2(value) {
          if (value === '食') {
            this.$router.push({path: 'redList'});
          };
          if (value === '住') {
            this.$router.push({path: 'liveIndex'});
          };
          if (value === '行') {
            this.$router.push({path: 'trafficIndex'});
          };
          if (value === '游') {
            this.$router.push({path: 'blueIndex'});
          };
          if (value === '购') {
            this.$router.push({path: 'buylist'});
          };
        }
      }
    }
</script>
<style scoped>
.tj-div{
  /* font-size: 0.38rem; */
  font-size:0.3rem;
  padding: 10px 20px 10px 20px;
}
.xbt-div{
  font-size: 0.35rem;
  padding: 10px 20px 10px 20px;
}
.jj-div{
  font-size: 0.3rem;
  padding: 10px 20px 20px 20px;
}
.tximg{
  height: 1rem;
  width: 1.5rem;
  float: right;
  margin-right: 10px;
  border-radius: 30px;
}
.dr-div{
  font-size: 0.3rem;
  padding: 5px 10px 5px 10px;
}
.line-style{
  border-bottom: 1px solid #999999;
  margin-left: 4%;
  width: 92%;
}
.line-div{
    margin-top:15px;
  border-top: 1px solid #999999;
  margin-left: 4%;
  width: 92%;
}
.tj-img{
  height: 2rem;
  width: 93%;
  /* margin-top: 10px; */
  float: left;
}
.xbtdiv{
  margin-top:10px;
  margin-left: 44%;
  font-size: 0.3rem;
}
.adddiv{
  margin-left: 44%;
  font-size: 0.25rem;
  margin-top: 10px;
}
.add2div{
  margin-left: 74%;
  font-size: 0.25rem;
  margin-top: 10px;
}
.xfdiv{
  margin-left: 44%;
  font-size: 0.3rem;
  margin-top: 20px;
}
.cgjsdiv{
  font-size: 0.3rem;
  margin: 30px 20px 20px 20px;
}
.mapbut{
  border: 1px solid #000;
  border-radius: 20px;
  background: #fff;
  text-align: center;
  position: fixed;
  width: 25%;
  height: 35px;
  line-height: 35px;
  left: 37.5%;
  bottom: 10px;
  z-index: 100;
}
.mapbut .icon-ucenter-outline:before {
  content: "\E616";
  color: #000;
}
.dituyindaotitle{
  width: 90%;
  height: 50px;
  margin-left: 5%;
  margin-top: 10px;
  font-size: 15px;
}
.amap-demo {
  height: 300px;
}
</style>
